<template>
  <div class="wrap">
    <!-- 头部 -->
    <a-card class="searchCard" :style="{ width: '100%', height: '120px', markRaw: '20px' }">
      <Header></Header>
    </a-card>
    <a-card :style="{ width: '100%', height: '77vh' }">
      <!-- 设备列表表格 -->
      <a-table
        :bordered="{ cell: true }"
        :wrapper="true"
        :columns="devListTablecolumns"
        :data="equipmentStore.$state.devList"
        :row-selection="rowSelection"
        row-key="devName"
        v-model:selectedKeys="selectedKeys"
        style="
           {
            color: '#808080';
          }
        "
        :pagination="{ total: equipmentStore.$state.total, current: equipmentStore.$state.currentPge }"
        @page-change="changeCurrentPage"
        :scrollbar="true"
        :scroll="{
          x: 1000,
          y: 510
        }"
        :loading="equipmentStore.$state.isLoading"
        @row-dblclick="tabDbClick"
      >
        <!-- 序号 -->
        <template #index="{ rowIndex }">
          {{ (equipmentStore.currentPge - 1) * 10 + (rowIndex + 1) }}
        </template>

        <!-- 设备状态 -->
        <template #devStatus="{ rowIndex }">
          <img
            class="statusImg_green"
            v-if="equipmentStore.$state.devList[rowIndex].devStatusName == '在线'"
            src="./images/zx.png"
          />
          <img
            class="statusImg_red"
            v-else-if="equipmentStore.$state.devList[rowIndex].devStatusName == '离线'"
            src="./images/lx.png"
          />
          <img class="statusImg_yellow" v-else src="./images/jg.png" />
        </template>

        <!-- 绑定状态 -->
        <template #isBind="{ rowIndex }">
          <a-tag v-if="equipmentStore.$state.devList[rowIndex].isBind == 1" :color="'#ff7d00'"> 已绑定</a-tag>
          <a-tag v-else :color="'#86909c'"> 未绑定</a-tag>
        </template>

        <!-- 激活状态 -->
        <template #activationStatus="{ rowIndex }">
          <a-tag v-if="equipmentStore.$state.devList[rowIndex].activationStatus == 1" color="arcoblue"> 已激活</a-tag>
          <a-tag v-else :color="'#86909c'"> 未激活</a-tag>
        </template>

        <!-- 操作 -->
        <template #operation="{ rowIndex }">
          <div class="operation_box">
            <a-button type="primary" @click="lookDetail(equipmentStore.$state.devList[rowIndex])">
              <template #icon>
                <icon-info-circle-fill />
              </template>
              详情
            </a-button>
            <a-tooltip content="查看更多操作" background-color="rgba(29, 96, 251,0.9)" mini>
              <img
                class="img_more"
                src="./images/gd.png"
                @click="lookMoreClick(equipmentStore.$state.devList[rowIndex])"
              />
            </a-tooltip>
          </div>
        </template>
      </a-table>
      <!-- 更多操作的的弹出框 -->
      <a-modal v-model:visible="isShowMoreModal" :footer="false" :width="1480">
        <template #title> 请选择操作 </template>
        <div class="more_operation_btn_box">
          <div class="card animate__animated animate__fadeInUp" @click="lookHistoryRecordBtnClick">
            <div class="card-content">
              <img src="../../assets/operation_images/sbsj.png" alt="" />
              <span>设备数据</span>
            </div>
          </div>
          <div class="card animate__animated animate__fadeInUp" @click="gatherMessageClick">
            <div class="card-content">
              <img src="../../assets/operation_images/cjxx.png" alt="" />
              <span>采集信息</span>
            </div>
          </div>
          <div class="card animate__animated animate__fadeInUp" @click="transferConfClick">
            <div class="card-content">
              <img src="../../assets/operation_images/cspz.png" alt="" />
              <span>传输配置</span>
            </div>
          </div>
          <div class="card animate__animated animate__fadeInUp" @click="criterionAcceptabilityClick">
            <div class="card-content">
              <img src="../../assets/operation_images/hgbz.png" alt="" />
              <span>合格标准</span>
            </div>
          </div>
          <div class="card animate__animated animate__fadeInUp" @click="devFlagConfBtnClick">
            <div class="card-content">
              <img src="../../assets/operation_images/sbbs.png" alt="" />
              <span>设备标识</span>
            </div>
          </div>
          <div class="card animate__animated animate__fadeInUp" @click="lookDevLogClick">
            <div class="card-content">
              <img src="../../assets/operation_images/sbrz.png" alt="" />
              <span>设备日志</span>
            </div>
          </div>
          <div class="card animate__animated animate__fadeInUp">
            <div class="card-content">
              <img src="../../assets/operation_images/sbgn.png" alt="" />
              <span>设备功能</span>
            </div>
          </div>
          <div class="card animate__animated animate__fadeInUp" @click="copyDevClick">
            <div class="card-content">
              <img src="../../assets/operation_images/fzsb.png" alt="" />
              <span>复制设备</span>
            </div>
          </div>
          <div class="card animate__animated animate__fadeInUp" @click="unbundleClick">
            <div class="card-content">
              <img src="../../assets/operation_images/jbsb.png" alt="" />
              <span>解绑设备</span>
            </div>
          </div>
          <div class="card animate__animated animate__fadeInUp" @click="delDevClick">
            <div class="card-content">
              <img src="../../assets/operation_images/scsb.png" alt="" />
              <span>删除设备</span>
            </div>
          </div>
          <div class="card animate__animated animate__fadeInUp" @click="devQrCodeClick">
            <div class="card-content">
              <img src="../../assets/operation_images/qrcode.png" alt="" />
              <span>设备二维码</span>
            </div>
          </div>
          <div class="card animate__animated animate__fadeInUp" @click="devActivationClick">
            <div class="card-content">
              <img src="../../assets/operation_images/jh.png" alt="" />
              <span>设备激活</span>
            </div>
          </div>
          <div class="card animate__animated animate__fadeInUp" @click="editDevClick">
            <div class="card-content">
              <img style="" src="./images/edit_dev1.png" alt="" />
              <span>修改设备</span>
            </div>
          </div>

          <!-- <div class="card_btn_ele"></div> -->
          <!-- <a-button type="primary" @click="lookHistoryRecordBtnClick">水质数据</a-button>
          <a-button type="primary" @click="copyDevClick">复制设备</a-button>
          <a-button type="primary" @click="lookDevLogClick">设备日志</a-button>
          <a-button type="primary" status="success" @click="devFlagConfBtnClick">设备标识</a-button>
          <a-button type="primary" status="warning" :disabled="tableColumnsClickInfo.isBind == 0" @click="unbundleClick"
            >解绑设备</a-button
          >
          <a-button type="primary" status="danger" @click="delDevClick">删除设备</a-button> -->
          <!-- <a-card :bordered="false" :style="{ width: '100px%' }"> </a-card> -->
        </div>
      </a-modal>

      <!-- 设备标识的弹出框 -->
      <a-modal v-model:visible="isShowDevFlagConfModal" :footer="false" :width="660" modalClass="devFlagConf_Modal">
        <template #title> 设置设备标识 </template>
        <div class="devFlagConf_Modal_box">
          <a-select
            v-if="isShowDevFlagConfModal"
            :style="{ width: '600px' }"
            placeholder="请选择设备标识"
            @change="devFlagConfChange"
            :model-value="currentDevFlagConfList"
            allow-clear
            multiple
          >
            <a-option v-for="df in allDevFlagConfList" :tag-props="{ color: 'green' }" :key="df.id">{{
              df.dictName
            }}</a-option>

            <!-- <template #header>
              <div style="padding: 6px 12px">
                <a-checkbox @change="devFlagConfCheckAllChange" v-model="isDevFlagConfCheckAll">全选</a-checkbox>
              </div>
            </template> -->
          </a-select>
        </div>
      </a-modal>
      <!-- 查看设备水质数据的弹出框 -->
      <a-modal
        modalClass="devDataModal"
        v-model:visible="isShowDevDataModal"
        @cancel="devDataModalCancel"
        :footer="false"
        :width="540"
      >
        <template #title> 设备水质数据 </template>
        <div class="devDataModal_content_box">
          <a-list :hoverable="true" :bordered="false" :loading="equipmentStore.$state.isShowDevDataModalLoading">
            <a-list-item
              class="devDataModal_content_item animate__animated animate__bounceInDown"
              v-for="(devData, index) in equipmentStore.$state.devDataList"
              :key="index"
            >
              <span class="devDataModal_content_item_paramName">{{ devData.paramName }}</span>
              <div class="value_box">
                <span class="devDataModal_content_item_paramValue">{{
                  `${devData.paramValue == null ? '--' : devData.paramValue}`
                }}</span>
                <span class="devDataModal_content_item_paramUnit">{{ devData.paramUnit }}</span>
              </div>
              <div class="proportion_box">
                <div class="suitable">
                  <span class="title">适宜占比</span>
                  <span class="value">{{ `${devData.shiyiRatio == null ? '---' : devData.shiyiRatio}` }}%</span>
                </div>
                <div class="high">
                  <span class="title">偏高占比</span>
                  <span class="value">{{ `${devData.piangaoRatio == null ? '---' : devData.piangaoRatio}` }}%</span>
                </div>
                <div class="low">
                  <span class="title">偏低占比</span>
                  <span class="value">{{ `${devData.piandiRatio == null ? '---' : devData.piandiRatio}` }}%</span>
                </div>
              </div>
              <div class="status_box"></div>
            </a-list-item>
          </a-list>
        </div>
      </a-modal>
      <!-- 删除设备的输入验证码的弹出框 -->
      <a-modal
        :okLoading="false"
        v-model:visible="isShowDelDevCheckCodeModal"
        title="请输入验证码"
        @cancel="delDevCheckCodeModalCancel"
        @ok="delDevCheckCodeModalOk"
      >
        <div style="height: 80px; padding-top: 40px">
          <label
            >验证码
            <a-input
              style="width: 420px; margin-left: 10px"
              v-model="delDevCheckCode"
              placeholder="请输入验证码"
              @press-enter="delDevCheckCodeModalOk"
            />
          </label>
        </div>
      </a-modal>
      <!-- 复制设备的弹出框 -->
      <a-modal
        v-model:visible="isShowCopyDevModal"
        title="请输入复制设备的信息"
        @cancel="copyDevModalCancel"
        @ok="copyDevModalOk"
      >
        <div style="height: 200px; padding-top: 40px">
          <a-form :model="copyDevInfo" :auto-label-width="true">
            <a-form-item field="sourceDevGId" label="被复制设备编码">
              <span>{{ copyDevInfo.sourceDevGId }}</span>
            </a-form-item>
            <a-form-item field="devGId" label="设备编码">
              <a-input v-model="copyDevInfo.devGId" placeholder="请输入设备编码" />
            </a-form-item>
            <a-form-item field="verifyCode" label="验证码">
              <a-input v-model="copyDevInfo.verifyCode" placeholder="请输入验证码" />
            </a-form-item>
          </a-form>
        </div>
      </a-modal>

      <!-- 设备详情信息的弹窗 -->
      <a-modal
        v-model:visible="isShowDevDetailInfoModal"
        width="1280px"
        style="font-family: VIVO1"
        :footer="false"
        class="dev_detail_modal"
      >
        <template #title> {{ currentDevDetailTitle }} </template>
        <div class="dev_detail_info_modal_box">
          <div class="detail_box">
            <span class="title">设备信息</span>
            <a-descriptions
              style="margin-top: 10px"
              :align="{ label: 'right' }"
              :data="currentDevDetailInfoList"
              size="large"
              :column="1"
            />
          </div>
          <div class="fs_box">
            <span class="title">激活信息</span>
            <a-descriptions
              style="margin-top: 10px"
              :align="{ label: 'right' }"
              :data="currentDevActiveDetailInfoList"
              size="large"
              :column="1"
            />
          </div>
          <div class="fs_box">
            <span class="title">用户信息</span>
            <a-descriptions
              style="margin-top: 10px"
              :align="{ label: 'right' }"
              :data="currentDevUserDetailInfoList"
              size="large"
              :column="1"
            />
          </div>
        </div>
      </a-modal>

      <!-- 设备二维码的抽屉组件 -->
      <a-drawer :width="800" :visible="isShowDevQrCodeDrawer" @cancel="devQrCodeCancel" unmountOnClose>
        <template #title> 设备二维码 </template>
        <v-contextmenu ref="contextmenu">
          <v-contextmenu-item @click="downDevQrCodeImgClick">保存图片</v-contextmenu-item>
          <v-contextmenu-item @click="downDevQrCodeClick">仅保存二维码</v-contextmenu-item>
        </v-contextmenu>
        <div class="devQrCode_drawer_box">
          <p class="title_text">预览</p>

          <div class="preview_box">
            <div v-contextmenu:contextmenu>
              <!-- <div id="preview_code_box" class="preview_code_box">
                <div class="header_box">
                  <img src="./images/logo.png" />
                </div>
                <div class="content_box">
                  <qrcode-vue
                    id="dev_qrcode"
                    :value="devQrcodeContentComp"
                    style="background-color: white"
                    :size="70"
                    level="H"
                  ></qrcode-vue>
                  <span class="dev_gid">{{ currentDevQrCodeDevGId }}</span>
                </div>
                <div class="footer_box">
                  <span class="company_name">浙江陆恒环境科技有限公司</span>
                </div>
               
              </div> -->
              <div id="preview_code_box" class="preview_code_box">
                <div class="main">
                  <div class="left">
                    <div class="top">
                      <img class="logo_img" src="./images/logo.png" />
                    </div>
                    <div class="bottom">
                      <div class="desc_box">
                        <span> 【微信扫一扫】 </span>
                        <span>开启恒蓝云</span>
                      </div>
                    </div>
                  </div>
                  <div class="right">
                    <div class="code_box">
                      <qrcode-vue
                        id="dev_qrcode"
                        :value="devQrcodeContentComp"
                        style="background-color: white"
                        :size="110"
                        level="H"
                      ></qrcode-vue>
                      <!-- 左上角角标 -->
                      <img class="qr_jb_img top_left_jb_img" src="./images/qr_jb.svg" />
                      <img class="qr_jb_img top_right_jb_img" src="./images/qr_jb.svg" />
                      <img class="qr_jb_img bottom_left_jb_img" src="./images/qr_jb.svg" />
                      <img class="qr_jb_img bottom_right_jb_img" src="./images/qr_jb.svg" />
                    </div>
                    <div class="dev_gid_box">
                      <span class="dev_gid_text">{{ currentDevQrCodeDevGId }}</span>
                    </div>
                  </div>
                </div>
                <div class="footer">
                  <span class="company">浙江陆恒环境科技有限公司</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <template #footer>
          <div style="height: 60px; line-height: 60px" class="btn_box">
            <a-button type="primary" @click="downDevQrCodeImgClick">下载图片</a-button>
            <a-button type="primary" style="margin-left: 10px" @click="printQrCodeClick">打印标签</a-button>
          </div>
        </template>
      </a-drawer>
    </a-card>

    <!-- 激活信息的弹窗 -->
    <a-modal v-model:visible="isShowActivationInfoDialog" :footer="false">
      <template #title> 设备激活信息 </template>
      <div class="dev_activation_info_box">设备激活信息</div>
    </a-modal>

    <!-- 激活表单的弹窗 -->
    <a-modal v-model:visible="isShowActivationFormDialog" :footer="true" @ok="activationFormDialogOk">
      <template #title> 设备激活 </template>
      <div class="dev_activation_form_box">
        <a-form :style="{ width: '400px' }" :model="devActivationFormData">
          <a-form-item field="name" label="业务员">
            <a-input v-model="devActivationFormData.salesman" placeholder="请输入业务员名称" />
          </a-form-item>
          <a-form-item field="post" label="场景">
            <!-- <a-input v-model="devActivationFormData.applicationScenarios" placeholder="请输入场景" /> -->
            <!-- <a-tag
              size="large"
              color="arcoblue"
              checkable
              v-for="(daas, indexD) in devActiveASList"
              :key="indexD"
              :checked="daas.isSelect"
              style="margin-right: 10px"
              @click="devActiveASCheck(daas.value)"
            >
              {{ daas.label }}</a-tag
            > -->
            <a-select
              :style="{ width: '320px' }"
              v-model="devActivationFormData.applicationScenarios"
              placeholder="请选择场景"
              allow-search
              allow-clear
            >
              <a-option v-for="(daas, indexD) in devActiveASList" :key="indexD">{{ daas.label }}</a-option>
            </a-select>
          </a-form-item>
          <a-form-item v-if="currentDevActivationStatus != 1" field="isRead" label="年限" class="active_form_year_box">
            <a-input-number
              :style="{ width: '140px' }"
              v-model="devActivationFormData.year"
              placeholder="请输入年限"
              :default-value="500"
              mode="button"
              class="active_form_year_input"
            />
            <span class="unit">年</span>
          </a-form-item>

          <a-form-item v-else field="isRead" label="到期时间" class="active_form_year_box">
            <a-date-picker style="width: 200px" v-model="devActivationExpireTime" />
          </a-form-item>

          <a-form-item field="isRead" label="省市区" class="active_form_year_box">
            <a-cascader
              :options="ssqChinaData"
              :style="{ width: '320px' }"
              placeholder="请选择省市区"
              allow-search
              path-mode
              allow-clear
              v-model="devActiveSsqDefaultInfos"
              @change="ssqCascaderChange"
            />
          </a-form-item>

          <a-form-item field="isRead" label="详细地址" class="active_form_year_box">
            <a-input v-model="devActivationFormData.devAddress" placeholder="请输入详细地址" />
          </a-form-item>

          <a-form-item field="isRead" label="客户名称" class="active_form_year_box">
            <a-input v-model="devActivationFormData.customName" placeholder="请输入客户名称" />
          </a-form-item>

          <a-form-item field="isRead" label="客户公司" class="active_form_year_box">
            <a-input v-model="devActivationFormData.customCompany" placeholder="请输入客户公司" />
          </a-form-item>

          <a-form-item field="isRead" label="所属行业" class="active_form_year_box">
            <a-select
              :style="{ width: '320px' }"
              v-model="devActivationFormData.industryCode"
              placeholder="请选择所属行业"
              allow-search
              allow-clear
            >
              <a-option v-for="(il, indexI) in industryList" :key="indexI" :value="il.dictCode">{{
                il.dictName
              }}</a-option>
            </a-select>
          </a-form-item>

          <a-form-item field="isRead" label="备注" class="active_form_year_box">
            <!-- <a-input v-model="devActivationFormData.customCompany" placeholder="请输入备注" /> -->
            <a-textarea v-model="devActivationFormData.devDesc" placeholder="请输入备注" allow-clear />
          </a-form-item>

          <a-form-item
            v-if="currentDevActivationStatus != 1"
            field="isRead"
            label="验证码"
            class="active_form_year_box"
          >
            <a-input v-model="devActivationFormData.verifyCode" placeholder="请输入验证码" />
          </a-form-item>
        </a-form>
      </div>
      <template #footer>
        <a-button v-if="currentDevActivationStatus != 1" type="primary" @click="activationFormDialogOk">激活</a-button>
        <a-button v-else type="primary" @click="activationFormDialogEdit">修改</a-button>
      </template>
    </a-modal>

    <!-- 修改设备信息弹窗 -->
    <!-- 激活信息的弹窗 -->
    <a-modal v-model:visible="isShowEditDevInfoDialog">
      <template #title> 修改设备信息 </template>
      <div class="edit_dev_info_box">
        <div class="dev_item_box">
          <span class="label">设备名称</span>
          <a-input v-model="editDevInfoDialogData.devName" placeholder="请输入设备名称" allow-clear />
        </div>
      </div>
      <template #footer>
        <a-button type="primary" @click="editDevInfoDialogSaveClick">保存</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
import './css/tag-1.scss'
import './index.scss'
import { defineComponent, ref, onMounted, watch, computed, reactive } from 'vue'
export default defineComponent({
  name: 'equipment'
})
</script>
<script lang="ts" setup>
// 引入
import QrcodeVue from 'qrcode.vue'
import {
  // getCurrentDevNewestDataListApi,
  getAllDevFlagConfApi,
  getCurrentDevFlagConfApi,
  addDevFlagConfApi,
  delDevFlagConfApi,
  unbundleDevApi,
  delDevApi,
  addDevApi,
  copyDevApi,
  activationDevApi,
  editActivationDevInfoApi,
  selectIndustryListApi,
  editDevNameApi
} from '@/apis/equipment'
import router from '@/router'
import Header from './module/header/index.vue'
import { useEquipmentStore, useUserStore } from '@/store'
import { number } from 'echarts'
import { Message } from '@arco-design/web-vue'
import domToImage from 'dom-to-image'
import { downloadFileByBase64 } from '@/utils/base64Down.js'
import printJS from 'print-js'
import jsonD from './data/data.json'
import chinaData from './data/china.json'
import { useRoute } from 'vue-router'

const route = useRoute()

const userStore = useUserStore()
const equipmentStore = useEquipmentStore()

// 省市区数据
const ssqChinaData = ref([])

// 处理省市区数据的函数
const disposeSSQChinaDataFunc = () => {
  let cData = chinaData
  console.log(cData)

  cData.forEach((item) => {
    item.label = item.name
    item.value = item.name
    item.children = item.city
    delete item.name
    delete item.code
    delete item.city
    console.log('itemc', item)
    if (item.children) {
      item.children.forEach((item1) => {
        item1.label = item1.name
        item1.value = item1.name
        item1.children = item1.area
        delete item1.name
        delete item1.code
        delete item1.area

        if (item1.children) {
          item1.children.forEach((item2) => {
            item2.label = item2.name
            item2.value = item2.name
            delete item2.name
            delete item2.code
          })
        } else {
          item1.children = []
        }
      })
    } else {
      item.children = []
    }
  })

  ssqChinaData.value = cData
}

// 省市区级联选择器change事件
const ssqCascaderChange = (e) => {
  console.log('省市区级联选择', e)
  devActivationFormData.value.province = e[0]
  devActivationFormData.value.city = e[1]
  devActivationFormData.value.district = e[2]
}

// 设备激活场景列表
const devActiveASList = ref<
  {
    label: string
    value: string
    isSelect: Boolean
  }[]
>(jsonD.devActiveApplicationScenariosKList)

// 激活表单弹窗修改点击事件
const activationFormDialogEdit = async () => {
  console.log(devActivationExpireTime.value)

  let data = {
    devId: devActivationFormData.value.devId,
    salesman: devActivationFormData.value.salesman,
    applicationScenarios: devActivationFormData.value.applicationScenarios,
    activationEndTime: `${devActivationExpireTime.value} 23:59:59`,
    province: devActivationFormData.value.province,
    city: devActivationFormData.value.city,
    district: devActivationFormData.value.district,
    devAddress: devActivationFormData.value.devAddress,
    customName: devActivationFormData.value.customName,
    customCompany: devActivationFormData.value.customCompany,
    verifyCode: devActivationFormData.value.verifyCode,
    devDesc: devActivationFormData.value.devDesc,
    industryCode: devActivationFormData.value.industryCode
  }

  console.log('修改设备激活信息数据', data)

  await editActivationDevInfoApi(data)
    .then((res) => {
      if (res.result == 'success') {
        Message.success('修改成功')
        isShowActivationFormDialog.value = false
        isShowMoreModal.value = false
      } else if (res.result == 'error') {
        Message.error(res.msg)
        isShowActivationFormDialog.value = true
      }
      equipmentStore.getDevListFunc()
    })
    .catch((err) => {
      Message.error('修改失败')
    })
}

// 激活表单弹窗激活点击事件
const activationFormDialogOk = async () => {
  // 判断字段是否漏缺

  // devActivationFormData.value.devGId = tableColumnsClickInfo.value.devGId
  console.log('激活设备数据', devActivationFormData.value)

  // 发送激活请求
  await activationDevApi(devActivationFormData.value)
    .then((res) => {
      if (res.result == 'success') {
        Message.success('激活成功')
        isShowActivationFormDialog.value = false
        isShowMoreModal.value = false
        clearDevActivationFormData()
      } else if (res.result == 'error') {
        Message.error(res.msg)
        isShowActivationFormDialog.value = true
      }
      equipmentStore.getDevListFunc()
    })
    .catch((err) => {
      Message.error('激活失败')
    })
}

// 设备激活表单场景选择点击事件
const devActiveASCheck = (value) => {
  devActiveASList.value.forEach((item) => {
    item.isSelect = false
    if (item.value == value) {
      item.isSelect = true
    }
  })
}

// 设备激活表单数据
const devActivationFormData = ref<{
  devId: string
  salesman: string
  applicationScenarios: string
  year: string | number
  province: string
  city: string
  district: string
  devAddress: string
  customName: string
  customCompany: string
  verifyCode: string
  industryCode: string
  devDesc: string
}>({
  devGId: '',
  salesman: '',
  applicationScenarios: '',
  year: 1,
  province: '',
  city: '',
  district: '',
  devAddress: '',
  customName: '',
  customCompany: '',
  verifyCode: '',
  industryCode: '',
  devDesc: ''
})

// 设备激活到期时间
const devActivationExpireTime = ref('')

// 清空设备激活表单数据
const clearDevActivationFormData = () => {
  devActivationFormData.value = {
    devGId: '',
    salesman: '',
    applicationScenarios: '',
    year: 1,
    province: '',
    city: '',
    district: '',
    devAddress: '',
    verifyCode: '',
    industryCode: '',
    devDesc: ''
  }
  devActiveSsqDefaultInfos.value = []
}

// 当前设备激活状态
const currentDevActivationStatus = ref(0)

// 激活设备表单弹窗显示标识
const isShowActivationFormDialog = ref(false)

// 设备激活信息弹窗显示标识
const isShowActivationInfoDialog = ref(false)

// 修改设备信息弹窗显示标识
const isShowEditDevInfoDialog = ref(false)

// 设备激活信息-省市区默认信息
const devActiveSsqDefaultInfos = ref([])

// 修改设备信息弹窗数据
const editDevInfoDialogData = ref({
  devName: ''
})

// 修改设备信息弹窗保存点击事件
const editDevInfoDialogSaveClick = async () => {
  let data = {
    devId: tableColumnsClickInfo.value.devId,
    newDevName: editDevInfoDialogData.value.devName
  }
  await editDevNameApi(data)
    .then((res) => {
      if (res.result == 'success') {
        Message.success('保存成功')
        editDevInfoDialogData.value.devName = ''
        isShowEditDevInfoDialog.value = false
        isShowMoreModal.value = false
        equipmentStore.getDevListFunc()
      } else if (res.result == 'error') {
        Message.error(res.msg)
      }
    })
    .catch(() => {})
}

// 修改设备点击事件
const editDevClick = () => {
  isShowEditDevInfoDialog.value = true
  editDevInfoDialogData.value.devName = tableColumnsClickInfo.value.devName
}

// 设备激活点击事件
const devActivationClick = () => {
  console.log('当前点击设备激活卡片的设备信息', tableColumnsClickInfo.value)

  // alert('设备激活')
  // if (currentDevActivationStatus.value) {
  //   isShowActivationInfoDialog.value = true
  // } else {

  // }

  // 设置激活状态，用于判断
  currentDevActivationStatus.value = tableColumnsClickInfo.value.activationStatus

  let bData = tableColumnsClickInfo.value.devBaseData

  if (bData != null || bData != undefined) {
    if (bData.province == null || bData.province == undefined || bData.province == '') {
      devActiveSsqDefaultInfos.value = ''
    } else {
      devActiveSsqDefaultInfos.value = `${bData.province}/${bData.city}/${bData.district}`
    }
  }

  devActivationExpireTime.value = tableColumnsClickInfo.value.activationEndTime
    ? tableColumnsClickInfo.value.activationEndTime.slice(0, 10)
    : ''

  // 传递数据
  devActivationFormData.value = {
    devId: tableColumnsClickInfo.value.devId,
    salesman: tableColumnsClickInfo.value.salesman,
    applicationScenarios: tableColumnsClickInfo.value.applicationScenarios,
    year: 1,
    province: bData ? bData.province : '',
    city: bData ? bData.city : '',
    district: bData ? bData.district : '',
    devAddress: bData ? bData.devAddress : '',
    customName: bData ? bData.customName : '',
    customCompany: bData ? bData.customCompany : '',
    industryCode: tableColumnsClickInfo.value.industryCode,
    devDesc: tableColumnsClickInfo.value.devDesc
  }

  // 显示弹窗
  isShowActivationFormDialog.value = true
}

// 打印二维码点击事件
const printQrCodeClick = () => {
  domToImage.toPng(document.getElementById('preview_code_box')).then((url: any) => {
    console.log(url)
    printJS(url, 'image')
    // downloadFileByBase64(url, currentDevQrCodeDevGId.value)
  })
}

// 下载图片仅二维码
const downDevQrCodeClick = () => {
  domToImage.toPng(document.getElementById('dev_qrcode')).then((url: any) => {
    console.log(url)
    downloadFileByBase64(url, currentDevQrCodeDevGId.value)
  })
}

// 下载图片按钮的点击事件
const downDevQrCodeImgClick = () => {
  domToImage.toPng(document.getElementById('preview_code_box')).then((url: any) => {
    console.log(url)
    downloadFileByBase64(url, currentDevQrCodeDevGId.value)
  })
}

// 设备二维码抽屉组件取消事件
const devQrCodeCancel = () => {
  isShowDevQrCodeDrawer.value = false
}

// 当前需要生成二维码的设备编码
const currentDevQrCodeDevGId = ref('')

// 当前需要生成二维码内容的计算属性
const devQrcodeContentComp = computed(() => {
  return `https://d.lohand.com:10001/weixin/miniprogram?devGId=${currentDevQrCodeDevGId.value}`
})

// 设备二维码抽屉组件显示的标识
const isShowDevQrCodeDrawer = ref(false)

// 设备二维码点击事件
const devQrCodeClick = () => {
  isShowMoreModal.value = false
  isShowDevQrCodeDrawer.value = true
  currentDevQrCodeDevGId.value = tableColumnsClickInfo.value.devGId
}

const currentDevDetailTitle = ref('')

// 设备详情信息弹窗显示的标识
const isShowDevDetailInfoModal = ref(false)

// 设备详情信息的数据
const currentDevDetailInfoList = ref([])

// 激活详情信息的数据
const currentDevActiveDetailInfoList = ref([])

// 用户详情信息的数据
const currentDevUserDetailInfoList = ref([])

// 处理省市区字符串信息
const disposeSsqStrFunc = () => {
  let bData = tableColumnsClickInfo.value.devBaseData
  let rStr = ''
  if (bData != null || bData != undefined) {
    if (bData.province == '' || bData.province == null || bData.province == undefined) {
      rStr = '--'
    } else {
      rStr = `${bData.province} / ${bData.city} / ${bData.district}`
    }
  } else {
    rStr = '--'
  }

  return rStr
}

// 查看详情的按钮点击事件
const lookDetail = (data: any) => {
  let newArr = []
  console.log(data)
  currentDevDetailTitle.value = '设备详情信息-' + data.devName
  tableColumnsClickFunc(data)
  isShowDevDetailInfoModal.value = true
  console.log(tableColumnsClickInfo.value)

  currentDevDetailInfoList.value = [
    {
      label: '设备ID',
      value: disposeDevDetailInfoDataNulltoNoNullFunc(tableColumnsClickInfo.value.devId)
    },
    {
      label: '设备名称',
      value: disposeDevDetailInfoDataNulltoNoNullFunc(tableColumnsClickInfo.value.devName)
    },
    {
      label: '设备编码',
      value: disposeDevDetailInfoDataNulltoNoNullFunc(tableColumnsClickInfo.value.devGId)
    },
    {
      label: '设备状态',
      value: disposeDevDetailInfoDataNulltoNoNullFunc(tableColumnsClickInfo.value.devStatusName)
    },
    {
      label: '设备类型',
      value: disposeDevDetailInfoDataNulltoNoNullFunc(tableColumnsClickInfo.value.devTypeName)
    },
    {
      label: '创建时间',
      value: disposeDevDetailInfoDataNulltoNoNullFunc(tableColumnsClickInfo.value.devCreateTime)
    },
    {
      label: '在线总时长',
      value: disposeDevDetailInfoDataNulltoNoNullFunc(
        (parseInt(tableColumnsClickInfo.value.totalOnlineTime) / 1000) * 60 * 60
      )
    },
    {
      label: '离线总时长',
      value: disposeDevDetailInfoDataNulltoNoNullFunc(
        (parseInt(tableColumnsClickInfo.value.totalOfflineTime) / 1000) * 60 * 60
      )
    },
    {
      label: '最近在线',
      value: disposeDevDetailInfoDataNulltoNoNullFunc(tableColumnsClickInfo.value.lastOnlineTime)
    },
    {
      label: '最近离线',
      value: disposeDevDetailInfoDataNulltoNoNullFunc(tableColumnsClickInfo.value.lastOfflineTime)
    }
  ]

  currentDevActiveDetailInfoList.value = [
    {
      label: '省市区',
      value: disposeSsqStrFunc()
    },
    {
      label: '详细地址',
      value: disposeDevDetailInfoDataNulltoNoNullFunc(
        tableColumnsClickInfo.value.devBaseData ? tableColumnsClickInfo.value.devBaseData.devAddress : '--'
      )
    },
    {
      label: '客户名称',
      value: disposeDevDetailInfoDataNulltoNoNullFunc(
        tableColumnsClickInfo.value.devBaseData ? tableColumnsClickInfo.value.devBaseData.customName : '--'
      )
    },
    {
      label: '客户公司',
      value: disposeDevDetailInfoDataNulltoNoNullFunc(
        tableColumnsClickInfo.value.devBaseData ? tableColumnsClickInfo.value.devBaseData.customCompany : '--'
      )
    },
    {
      label: '所属行业',
      value: disposeDevDetailInfoDataNulltoNoNullFunc(
        tableColumnsClickInfo.value ? tableColumnsClickInfo.value.industryName : '--'
      )
    },
    {
      label: '设备备注',
      value: disposeDevDetailInfoDataNulltoNoNullFunc(
        tableColumnsClickInfo.value ? tableColumnsClickInfo.value.devDesc : '--'
      )
    }
  ]

  currentDevUserDetailInfoList.value = [
    {
      label: '用户ID',
      value: disposeDevDetailInfoDataNulltoNoNullFunc(
        tableColumnsClickInfo.value.user ? tableColumnsClickInfo.value.user.userId : '--'
      )
    },
    {
      label: '用户名',
      value: disposeDevDetailInfoDataNulltoNoNullFunc(
        tableColumnsClickInfo.value.user ? tableColumnsClickInfo.value.user.userName : '--'
      )
    },
    {
      label: '手机号',
      value: disposeDevDetailInfoDataNulltoNoNullFunc(
        tableColumnsClickInfo.value.user ? tableColumnsClickInfo.value.user.userPhone : '--'
      )
    }
  ]

  console.log(currentDevDetailInfoList.value)
  console.log(currentDevActiveDetailInfoList.value)
  console.log(currentDevUserDetailInfoList.value)
}

// 处理设备详情数据的函数
const disposeDevDetailInfoDataNulltoNoNullFunc = (str: any) => {
  console.log(str)

  return str == null ? '--' : str
}

// 操作-合格标准的点击事件
const criterionAcceptabilityClick = () => {
  router.push('/equipment/criterionAcceptability')
}

// 操作--采集信息的点击事件
const gatherMessageClick = () => {
  router.push('/equipment/gatherMessage')
}

// 操作--传输配置的点击事件
const transferConfClick = () => {
  router.push('/equipment/transferConf')
}

// 查看设备日志按钮的点击事件
const lookDevLogClick = () => {
  router.push({
    path: '/equipment/equipmentLog'
  })
}

// 复制设备需要提交的信息
const copyDevInfo = ref({
  sourceDevGId: '',
  devGId: '',
  verifyCode: ''
})

// 是否显示复制设备的弹出框标识
const isShowCopyDevModal = ref(false)

// 复制设备弹窗的确定按钮加载状态标识
const isCopyDevModalOkBtnLoading = ref(false)

// 复制设备的按钮点击事件
const copyDevClick = () => {
  isShowCopyDevModal.value = true
  isShowMoreModal.value = false
  copyDevInfo.value.sourceDevGId = tableColumnsClickInfo.value.devGId
  console.log('复制设备')
}

// 复制设备弹出框的确定事件函数
const copyDevModalOk = () => {
  copyDevFunc()
  console.log('确认复制设备')
}
// 复制设备弹出框的取消事件函数
const copyDevModalCancel = () => {
  // isShowCopyDevModal.value = false
}
// 复制设备发请求的函数
const copyDevFunc = async () => {
  console.log(copyDevInfo.value)
  if (copyDevInfo.value.devGId == '' || copyDevInfo.value.verifyCode == '') {
    Message.warning('请将设备编码和验证码填写完整再次重试！')
  } else {
    await copyDevApi({
      sourceDevGId: copyDevInfo.value.sourceDevGId,
      devGId: copyDevInfo.value.devGId,
      verifyCode: copyDevInfo.value.verifyCode
    })
      .then((res: any) => {
        if (res.result == 'error') {
          console.log(res.msg)
          Message.error(res.msg)
        } else {
          isShowCopyDevModal.value = false
        }
      })
      .catch(() => {
        Message.error('复制设备失败')
      })
    equipmentStore.getDevListFunc()
  }
}

// 添加设备保存的数据
const addDevInfo = ref({
  devGId: '',
  operateUser: '',
  devDesc: ''
})

// 添加设备的点击事件函数
const addDevClick = () => {
  // 拿到当前的操作者userId
  addDevInfo.value.operateUser = userStore.$state.userId
  addDevFunc()
  console.log('添加设备')
}

// 添加设备发请求的函数
const addDevFunc = async () => {
  await addDevApi({
    devGId: addDevInfo.value.devGId,
    operateUser: '',
    devDesc: addDevInfo.value.devDesc
  })
    .then(() => {
      Message.success('添加设备成功')
    })
    .catch(() => {
      Message.error('添加设备失败')
    })
}

// 是否显示删除设备验证码的弹出框的标识
const isShowDelDevCheckCodeModal = ref(false)

// 删除设备时的验证码
const delDevCheckCode = ref('')

// 删除设备验证码弹出框的确定按钮点击事件
const delDevCheckCodeModalOk = () => {
  isShowDelDevCheckCodeModal.value = false
  console.log('确定删除')
  delDevFunc()
}

// 删除设备验证码弹出框的取消按钮点击事件
const delDevCheckCodeModalCancel = () => {
  isShowDelDevCheckCodeModal.value = false
}
// 删除设备按钮的点击事件
const delDevClick = () => {
  console.log('删除设备')
  isShowDelDevCheckCodeModal.value = true
}

// 删除设备的事件函数
const delDevFunc = async () => {
  await delDevApi({
    devId: tableColumnsClickInfo.value.devId,
    checkCode: delDevCheckCode.value
  })
    .then(() => {
      Message.success('删除设备成功')
      equipmentStore.getDevListFunc()
    })
    .catch(() => {
      Message.error('删除设备失败')
    })

  isShowMoreModal.value = false
}

// 解绑设备按钮的点击事件函数
const unbundleClick = () => {
  console.log('解绑设备')
  unbundleDev()
}

// 发送解绑设备请求的函数
const unbundleDev = async () => {
  // 获取当前用户的userId
  let userId = localStorage.getItem('userId')
  // console.log(localStorage.getItem('userId'))

  await unbundleDevApi({
    devId: tableColumnsClickInfo.value.devId,
    platFormUserId: userId
  })
    .then((res) => {
      if (res.result == 'error') {
        Message.error(res.message.msg)
      } else {
        Message.success('解绑成功!')
        isShowMoreModal.value = false
      }
    })
    .catch(() => {
      Message.error('解绑失败!')
    })
  equipmentStore.getDevListFunc()
}

// 设备标识弹出框的下拉列表框默认展示的标识
const isShowDevFlagConfModalSelectOptions = ref(false)

// 控制设备标识弹出框展示的标识
const isShowDevFlagConfModal = ref(false)

// 存储所有设备标识列表的数据
const allDevFlagConfList = ref([])

// 存储当前设备标识列表显示的数据
const currentDevFlagConfList = ref([])

// 存储当前设备标识列表显示的对象数据
const currentDevFlagConfObjList = ref([])

// 存储当前设备标识上一次的数据
const currentDevFlagConfOldList = ref([])

// 设备标识选择框的Change事件
const devFlagConfChange = (e: any) => {
  // 判断当前是添加还是删除
  let isAdd = null
  if (currentDevFlagConfOldList.value.length < e.length) {
    isAdd = true
  } else {
    isAdd = false
  }

  if (isAdd) {
    // 添加操作
    // 当前选择的标识的code
    let currentFlagConfCode = ''
    let currentFlagConfName = e[e.length - 1]
    allDevFlagConfList.value.forEach((item: any) => {
      if (item.dictName == currentFlagConfName) {
        currentFlagConfCode = item.dictCode
      }
    })
    currentDevAddFlagConfFunc(currentFlagConfCode)
  } else {
    // 删除操作
    let oldList = currentDevFlagConfOldList.value
    let currentFlagConfList = currentDevFlagConfList.value
    // 当前要删除的设备标识Id
    let currentDevFlagConfId = null
    let delDictName = oldList.concat(e).filter((val, i, arr) => {
      return arr.indexOf(val) === arr.lastIndexOf(val)
    })

    console.log(currentFlagConfList)

    currentDevFlagConfObjList.value.forEach((item: any) => {
      if (item.devFlagConfName == delDictName) {
        console.log(item.devFlagConfId)
        currentDevFlagConfId = item.devFlagConfId
      }
    })
    delCurrentDevFlagConfFunc(currentDevFlagConfId)
  }
  currentDevFlagConfOldList.value = e
}

// 单个删除当前设备的标识的函数
const delCurrentDevFlagConfFunc = async (currentDevFlagConfId: any) => {
  console.log(currentDevFlagConfId)

  await delDevFlagConfApi(currentDevFlagConfId)
    .then(() => {
      getCurrentDevFlagConfFunc()
      Message.success('删除设备标识成功')
    })
    .catch(() => {
      Message.error('删除设备标识失败')
    })
}

// // 设备标识弹出框取消的点击事件
// const devFlagConfModalCancel = () => {
//   isShowDevFlagConfModal.value = false
// }

// 查询所有设备标识列表的函数
const getAllDevFlagConfFunc = async () => {
  const res = await getAllDevFlagConfApi()
  console.log(res)
  allDevFlagConfList.value = res.data
}

// 查询当前设备的标识列表的函数
const getCurrentDevFlagConfFunc = async () => {
  let devId = tableColumnsClickInfo.value.devId
  console.log(devId)
  const res = await getCurrentDevFlagConfApi(devId)
  currentDevFlagConfObjList.value = res.data
  let newData = []
  res.data.forEach((item: any) => {
    newData.push(item.devFlagConfName)
  })
  currentDevFlagConfOldList.value = newData
  currentDevFlagConfList.value = newData

  // console.log(equipmentStore.$state.devInfo.devId)
}

// 给当前设备添加标识的函数
const currentDevAddFlagConfFunc = async (currentFlagConfCode: string) => {
  await addDevFlagConfApi({
    devId: tableColumnsClickInfo.value.devId,
    devFlagConfCode: currentFlagConfCode
  })
    .then(() => {
      Message.success('添加设备标识成功')
      getCurrentDevFlagConfFunc()
    })
    .catch(() => {
      Message.success('添加设备标识失败')
    })
}

// 设备标识按钮的点击事件
const devFlagConfBtnClick = () => {
  currentDevFlagConfList.value = []
  getCurrentDevFlagConfFunc()
  getAllDevFlagConfFunc()
  isShowMoreModal.value = false
  isShowDevFlagConfModal.value = true
  isShowDevFlagConfModalSelectOptions.value = true
}

// 控制展示的设备的数据的弹出框的取消点击事件
const devDataModalCancel = () => {
  isShowDevDataModal.value = false
}

// 表格的双击事件函数
const tabDbClick = (e: object) => {
  equipmentStore.getCurrentDevNewestDataListFunc(e.devId)
  console.log(e)
  isShowDevDataModal.value = true
}
// 控制展示的设备的数据的弹出框显示的标识
const isShowDevDataModal = ref(false)

// 显示更多按钮弹窗的标识
const isShowMoreModal = ref(false)
// 表格选择框
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: false
})

// 表格选择框数据
const selectedKeys = ref([])
// 定义表格渲染的表头规则
const devListTablecolumns = ref([
  {
    title: '序号',
    dataIndex: 'index',
    width: '80',
    align: 'center',
    slotName: 'index'
  },
  {
    title: '设备名称',
    width: '250',
    dataIndex: 'devName',
    align: 'center'
  },
  {
    title: '设备编码',
    width: '220',
    dataIndex: 'devGId',
    align: 'center'
  },
  {
    title: '设备型号',
    dataIndex: 'devTypeName',
    align: 'center',
    width: '160'
  },
  {
    title: '设备状态',
    dataIndex: 'devStatus',
    width: '100',
    align: 'center',
    slotName: 'devStatus'
  },
  {
    title: '绑定状态',
    dataIndex: 'isBind',
    width: '100',
    align: 'center',
    slotName: 'isBind'
  },
  {
    title: '激活状态',
    dataIndex: 'activationStatus',
    width: '100',
    align: 'center',
    slotName: 'activationStatus'
  },
  {
    title: '业务员',
    dataIndex: 'salesman',
    width: '100',
    align: 'center',
    slotName: 'salesman'
  },
  {
    title: '场景',
    dataIndex: 'applicationScenarios',
    width: '100',
    align: 'center',
    slotName: 'applicationScenarios'
  },

  // {
  //   title: '用户手机号',
  //   dataIndex: 'userPhone',
  //   align: 'center',
  //   width: '200'
  // },
  {
    title: '激活时间',
    dataIndex: 'activationStartTime',
    align: 'center',
    width: '180'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: '180',
    align: 'center',
    slotName: 'operation'
  }
])

// 点击表格每一项时要存储的数据
const tableColumnsClickInfo = ref({
  devId: '',
  devName: '',
  devTypeId: '',
  devGId: '',
  dtuId: '',
  userId: '',
  userPhone: '',
  devStatusCode: '',
  devCreateTime: '',
  totalOnlineTime: '',
  totalOfflineTime: '',
  lastOnlineTime: '',
  lastOfflineTime: '',
  isManage: '',
  isBind: '',
  operateUser: '',
  devDesc: '',
  industryCode: '',
  devTypeName: '',
  devStatusName: '',
  industryName: '',
  devBaseDataList: '',
  paramList: '',
  devFunList: ''
})

// 解绑设备的点击事件
// const

// 查看设置水质数据的按钮点击事件
const lookHistoryRecordBtnClick = () => {
  // console.log('111');
  router.push({
    path: '/equipment/newestData'
  })
  equipmentStore.$state.devInfo.devName = tableColumnsClickInfo.value.devName
  equipmentStore.$state.devInfo.devId = tableColumnsClickInfo.value.devId
}

// 查看更多的点击事件
const lookMoreClick = (data: any) => {
  // console.log(data);
  isShowMoreModal.value = true
  tableColumnsClickFunc(data)
}

// 点击表格每一项时存储数据的函数
const tableColumnsClickFunc = (data: any) => {
  tableColumnsClickInfo.value = data
  equipmentStore.$state.devInfo.devId = data.devId
  equipmentStore.$state.devInfo.devName = data.devName
}

// 分页的当前页change事件
const changeCurrentPage = (val: any) => {
  equipmentStore.$state.currentPge = val
  equipmentStore.getDevListFunc()
}
// 每页多少条的change事件
const changePageSize = (val: any) => {
  equipmentStore.$state.pageSize = val
  equipmentStore.getDevListFunc()
}

// 获取指定名称的Cookie值
// function deal() {
//   var cookie = document.cookie
//   var arr = cookie.split('; ') //注意是 分号空格
//   var obj = {}
//   arr.forEach(function (item) {
//     var itemArr = item.split('=')
//     obj[itemArr[0]] = itemArr[1]
//   })
//   return obj
// }

// 行业类型
interface industryType {
  createTime: string
  dictCode: string
  dictDesc: string
  dictName: string
  dictTypeCode: string
  dictValue: string
  id?: number
  sort: number
  status: number
}

// 行业列表
const industryList = ref<industryType[]>([])

// 查询行业列表的函数
const selectIndustryListFunc = async () => {
  await selectIndustryListApi().then((res) => {
    industryList.value = res.data.filter((industry) => {
      return industry.status == 1
    })

    console.log('行业列表', industryList.value)
  })
}

// 初始化
onMounted(() => {
  console.log('设备管理路由数据', route.query)
  let sDevGId = route.query.devGId
  if (sDevGId) {
    equipmentStore.searchForm.devGId = sDevGId
  }

  equipmentStore.getDevListFunc()
  equipmentStore.getFlagConfListFunc()
  disposeSSQChinaDataFunc()
  selectIndustryListFunc()
  // console.log(equipmentStore.$state.isLoading);
  console.log(document.cookie)
})
</script>

<style lang="scss" scoped>
.wrap {
  padding: 14px;
}

.statusImg_red {
  width: 20px;
  border-radius: 50%;
  box-shadow: 0px 0px 8px 1px rgb(243, 116, 116);
}
.statusImg_red:hover {
  transition: 0.1s;
  border-radius: 50%;
  width: 20px;
  box-shadow: 0px 0px 12px 3px rgb(243, 116, 116);
}

.statusImg_yellow {
  width: 20px;
  border-radius: 50%;
  box-shadow: 0px 0px 8px 1px rgb(253, 207, 65);
}
.statusImg_yellow:hover {
  transition: 0.1s;
  border-radius: 50%;
  width: 20px;
  box-shadow: 0px 0px 12px 3px rgb(253, 207, 65);
}
.statusImg_green {
  width: 20px;
  border-radius: 50%;
  box-shadow: 0px 0px 8px 1px greenyellow;
}
.statusImg_green:hover {
  transition: 0.1s;
  border-radius: 50%;
  width: 20px;
  box-shadow: 0px 0px 12px 3px greenyellow;
}

.searchCard {
  margin-bottom: 20px;
}

.arco-table-element .arco-table-tr {
  height: 80px !important;
}

.operation_box {
  display: flex;
  justify-content: space-around;
}

.img_more {
  margin-top: 6px;
  width: 23px;
  height: 23px;
}

.img_more:hover {
  transition: 0.3s;
  border-radius: 2%;
  /* border-radius: 50px; */
  /* background: #e0e0e0; */
  box-shadow: 0px 0px 10px 1px rgba(29, 96, 251, 0.5);
  background: rgba(29, 96, 251, 0.1);
  width: 25px;
  height: 25px;
  display: block;
}

/* 表格字体颜色 */
::v-deep .arco-table-td-content {
  color: #808080 !important;
  font-size: 13px;
}

.more_operation_btn_box {
  height: 700px !important;
  display: flex;
  flex-direction: row;
  padding-left: 10px;
}

.more_operation_btn_box button {
  height: 40px;
  margin-top: 18px;
  /* font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px; */
}

/* ::v-deep .arco-btn {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
} */

.wrap {
  overflow: scroll;
}
::v-deep .arco-card-body {
  overflow: auto;
}

.devDataModal {
  height: 100px;
  overflow: auto;
}
.devDataModal_content_box {
  height: 800px;
  overflow: auto;
  /* height: 1200px; */
  /* display: flex; */
}

::v-deep .arco-modal-body {
  width: 600px;
  height: 400px;
  overflow: auto;
}
::v-deep .arco-list-content {
  /* padding: 20px; */
  width: 500px;
  /* height: 780px; */
  overflow: auto;
  /* display: flex;
  flex-direction: column;
  justify-content: space-evenly; */
}

::v-deep .devDataModal_content_item {
  --animation-direction: 0.3s;
  position: relative;
  height: 114px;
  width: 480px;
  margin-bottom: 15px;
  border: 1px solid #e5e6eb;
}

::v-deep .devDataModal_content_item .arco-list-item-content {
  /* padding: 20px 10px; */
}
.devDataModal_content_item_paramName {
  width: 110px;
  display: inline-block;
  letter-spacing: 1px;
  font-size: 18px;
  line-height: 80px;
  /* height: 100%; */
  font-family: '黑体';
  font-weight: bold;
  color: #324569;
}

.devDataModal_content_item .value_box .devDataModal_content_item_paramValue {
  font-size: 28px;
  letter-spacing: 1px;
  font-family: '黑体';
  font-weight: bold;
}

::v-deep .arco-list-item-content {
  display: flex;
}

.devDataModal_content_item .value_box {
  display: inline-block;
  /* margin-left: 20px; */
  margin-top: 16px;
  width: 120px;
  height: 100%;
}
.devDataModal_content_item .value_box .devDataModal_content_item_paramUnit {
  margin-left: 5px;
  font-size: 14px;
  color: #808080;
}

.proportion_box {
  position: relative;
  top: -4px;
  margin-left: 60px;
  display: flex;
  flex-direction: column;
  height: 90px;
  justify-content: space-between;
  font-size: 17px;
  font-weight: bold;
  /* margin-top: 20px; */
}
.proportion_box div {
  margin-top: 2px;
}
.proportion_box div .value {
  margin-left: 6px;
}

.proportion_box .suitable .value {
  color: #19ad54;
}
.proportion_box .high .value {
  color: #f25656;
}
.proportion_box .low .value {
  color: #f9b641;
}

.status_box {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 16px;
  height: 16px;
  background: #19ad54;
  border-radius: 50%;
}

.devFlagConf_Modal_box {
  width: 100%;
  height: 500px;
}

/* card_btn */

.card_btn_ele {
  width: 190px;
  height: 254px;
  background: lightgray;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  color: #333;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  border-radius: 40px;
  cursor: pointer;
  position: relative;
  transition: all 0.7s ease-in-out;
  overflow: hidden;
}

.card_btn_ele::before {
  content: '';
  position: absolute;
  height: 40%;
  width: 100%;
  background-color: #088080;
  bottom: 0;
  right: 0;
  transform: translatey(70px);
  border-radius: 100%;
  transition: all 0.7s ease-in-out;
}

.c-txt {
  z-index: 2;
}

.card_btn_ele:hover::before {
  transform: scale(7) translate(-20px);
}

.card_btn_ele:hover {
  box-shadow: 1px -10px 500px 500px #9fe4e44a;
  color: #f3f3f3;
}

/* 操作卡片样式 ------------------------------------------------------------------- */
.more_operation_btn_box {
  height: 550px;
  width: 1400px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-bottom: 80px;
  box-sizing: border-box;
}

.more_operation_btn_box .card {
  margin-top: 40px;
  margin-left: 50px;
  width: 220px;
  height: 180px;
  background-color: #4158d0;
  background-image: linear-gradient(43deg, #4facfe, #00f2fe);
  border-radius: 8px;
  color: white;
  overflow: hidden;
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
}

.more_operation_btn_box .card-content {
  font-size: 18px;
  font-weight: bold;
  /* padding: 20px; */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #324569;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}
.more_operation_btn_box .card-content img {
  width: 120px;
  height: 110px;
}

.more_operation_btn_box .card-content .card-title {
  font-size: 24px;
  font-weight: 700;
  color: inherit;
  text-transform: uppercase;
}

.more_operation_btn_box .card-content .card-para {
  color: inherit;
  opacity: 0.8;
  font-size: 14px;
}

.more_operation_btn_box .card:hover {
  transition: 0.3s;
  margin-top: 30px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.more_operation_btn_box .card:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 1;
}

.more_operation_btn_box .card:hover:before {
  transform: translateX(-100%);
}

.more_operation_btn_box .card:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 1;
}

.more_operation_btn_box .card:hover:after {
  transform: translateX(100%);
}

.devQrCode_drawer_box {
  padding: 60px 0;
  height: 100%;
  background-color: rgb(236, 236, 236);
}

.preview_box {
  /* width: 100%; */
  width: 310px;
  height: 200px;
  margin: 0 auto;
  border: 1px solid rgba(134, 144, 155, 0.5);
  border-radius: 6px;
  // transform: scale(1.5);
}

.title_text {
  padding-left: 80px;
  margin-bottom: 20px;
  letter-spacing: 5px;
  font-size: 20px;
  font-weight: bold;
}

// .preview_code_box {
//   background-color: white;
//   width: 227px;
//   height: 147px;
//   display: flex;
//   flex-direction: column;
//   padding: 4px;
//   box-sizing: border-box;
//   border-radius: 10px;

//   .header_box {
//     margin-bottom: 6px;

//     img {
//       position: relative;
//       left: 8px;
//       top: 4px;
//       width: 54px;
//       height: 18px;
//     }
//   }
//   .content_box {
//     display: flex;
//     flex-direction: column;
//     text-align: center;
//     position: relative;
//     margin-bottom: 4px;

//     #dev_qrcode {
//       position: relative;
//       top: -4px;
//       left: 51%;
//       transform: translateX(-50%);
//     }

//     .dev_gid {
//       font-size: 13px;
//       font-weight: bold;
//       position: relative;
//       // top: 3px;
//     }
//   }
//   .footer_box {
//     text-align: center;

//     .company_name {
//       font-size: 14px;
//       letter-spacing: 2px;
//       font-weight: bold;
//       position: relative;
//       top: -6px;
//       left: 2px;
//     }
//   }
// }

/* ::v-deep .arco-modal-body {
  padding-bottom: 20px;
} */

.card {
  --animate-duration: 0.6s;
}

.dev_detail_info_modal_box {
  // border: 1px solid red;
  width: 1240px;
  height: 480px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .detail_box {
    width: 400px;
    display: flex;
    flex-direction: column;
    border: 1px dashed rgba(104, 96, 96, 0.3);
    padding: 20px 0px;
    // border: 1px solid red;
    // justify-content: space-between;
    // align-items: center;

    .title {
      text-align: center;
      font-size: 18px;
      display: inline-block;
      margin-bottom: 12px;
      letter-spacing: 1px;
    }
  }

  .fs_box {
    width: 400px;
    display: flex;
    flex-direction: column;
    border: 1px dashed rgba(104, 96, 96, 0.3);
    padding: 20px 0px;
    // border: 1px solid red;
    // justify-content: space-between;
    // align-items: center;

    .title {
      letter-spacing: 1px;
      text-align: center;
      font-size: 18px;
      display: inline-block;
      margin-bottom: 16px;
    }
  }
}

::v-deep .arco-descriptions-size-large .arco-descriptions-item-label-block,
.arco-descriptions-size-large .arco-descriptions-item-value-block {
  padding-bottom: 18px;
}

::v-deep .arco-descriptions-size-large .arco-descriptions-item-label-block,
.arco-descriptions-size-large .arco-descriptions-item-value-block {
  padding-bottom: 18px;
  padding-left: 50px;
}
::v-deep .arco-descriptions-item-value-block {
  padding: 0 4px 18px 15px;
}
::v-deep .arco-descriptions-item-label-block {
  padding: 0 4px 12px 0px;
}

#printJS {
  .no-print {
    display: none; /* 不显示在打印版本中 */
  }
  @page {
    margin: 0; /* 去掉页边距 */
  }
}

:deep(.active_form_year_input) {
  .arco-input-wrapper {
    .arco-input {
      text-align: center;
    }
  }
}

.dev_activation_form_box {
  padding: 40px 26px;

  .active_form_year_box {
    .unit {
      margin-left: 8px;
      position: relative;
      top: 6px;
      color: #5e5d5d;
    }
  }
}

:deep(.dev_detail_modal) {
  width: 1200px !important;
  font-family: VIVO1 !important;

  .arco-modal-wrappe {
    font-family: VIVO1 !important;
    .arco-modal {
      width: 1200px !important;
      font-family: VIVO1 !important;

      .arco-modal-header {
        font-family: VIVO1 !important;
        .arco-modal-title {
          font-family: VIVO1 !important;
          background: red !important;
        }
      }

      .arco-modal-body {
        width: 1200px !important;
        padding: 0 !important;
        font-family: VIVO1 !important;
      }
    }
  }
}

:deep(.arco-modal) {
  .arco-modal-header {
    .arco-modal-title {
      font-family: VIVO1 !important;
    }
  }
}

.arco-descriptions {
  font-family: VIVO1;
  letter-spacing: 0.4px;
}

.divider-demo {
  box-sizing: border-box;
  width: 560px;
  padding: 24px;
  border: 30px solid rgb(var(--gray-2));
}
</style>
